{% extends "sysadmin/base.html" %}

{% load seahub_tags i18n %}

{% block cur_statistic %}tab-cur{% endblock %}

{% block right_panel %}
{% with cur_tab='traffic' %}
{% include 'sysadmin/snippets/sys_statistic_nav.html' %}
{% endwith %}

<ul class="traffic-tab-nav">
    <li class="tab">
        <a href="{% url 'sys_statistic_traffic' %}" class="a">{% trans "System" %}</a>
    </li>
    <li class="tab {% if type == 'user' %}tab-cur{% endif %}">
        <a href="?type=user" class="a">{% trans "Users" %}</a>
    </li>
    <li class="tab {% if type == 'org' %}tab-cur{% endif %}">
        <a href="?type=org" class="a">{% trans "Organizations" %}</a>
    </li>
</ul>

<form action="" method="get" autocomplete="off" id="traffic-month-form">
    <input type="hidden" name="type" value="{{type}}" />
    <label for="month">{% trans "Month:" %}</label>
    <input type="text" name="month" maxlength="6" value="{{ month }}" class="input" />
</form>

<table>
    <thead>
        <tr>
            <th width="16%">
                {% if type == 'user' %}
                {% trans "User" %}
                {% else %}
                {% trans "Organization" %}
                {% endif %}
            </th>
            <th width="11%">
                <a href="" class="table-sort-op">
                    {% trans "Sync Upload" %}
                    <span class="sort-icon hide"></span>
                </a>
            </th>
            <th width="14%">
                <a href="" class="table-sort-op">
                    {% trans "Sync Download" %}
                    <span class="sort-icon hide"></span>
                </a>
            </th>
            <th width="11%">
                <a href="" class="table-sort-op">
                    {% trans "Web Upload" %}
                    <span class="sort-icon hide"></span>
                </a>
            </th>
            <th width="14%">
                <a href="" class="table-sort-op">
                    {% trans "Web Download" %}
                    <span class="sort-icon hide"></span>
                </a>
            </th>
            <th width="17%">
                <a href="" class="table-sort-op">
                    {% trans "Share link upload" %}
                    <span class="sort-icon hide"></span>
                </a>
            </th>
            <th width="17%">
                <a href="" class="table-sort-op">
                    {% trans "Share link download" %}
                    <span class="sort-icon hide"></span>
                </a>
            </th>
        </tr>
    </thead>

    <tbody>
        {% for info in traffic_info_list %}
        <tr>
            <td>
                {% if info.org_id > 0 %}
                <a href="{% url 'sys_org_info_user' info.org_id %}">{{ info.org_name }}</a>
                {% elif info.user %}
                <a href="{% url 'user_info' info.user %}">{{ info.user|email2nickname }}</a>
                {% else %}
                --
                {% endif %}
            </td>
            <td>{{ info.sync_file_upload|filesizeformat }}</td>
            <td>{{ info.sync_file_download|filesizeformat }}</td>
            <td>{{ info.web_file_upload|filesizeformat }}</td>
            <td>{{ info.web_file_download|filesizeformat }}</td>
            <td>{{ info.link_file_upload|filesizeformat }}</td>
            <td>{{ info.link_file_download|filesizeformat }}</td>
        </tr>
        {% endfor %}
    </tbody>
</table>

<div id="paginator">
    {% if current_page != 1 %}
    <a href="?page={{ prev_page }}&per_page={{ per_page }}">{% trans "Previous" %}</a>
    {% endif %}
    {% if page_next %}
    <a href="?page={{ next_page }}&per_page={{ per_page }}">{% trans "Next" %}</a>
    {% endif %}
    {% if current_page != 1 or page_next %}
    |
    {% endif %}
    <span>{% trans "Per page: " %}</span>
    {% if per_page == 25 %}
    <span> 25 </span>
    {% else %}
    <a href="?per_page=25" class="per-page">25</a>
    {% endif %}
    {% if per_page == 50 %}
    <span> 50 </span>
    {% else %}
    <a href="?per_page=50" class="per-page">50</a>
    {% endif %}
    {% if per_page == 100 %}
    <span> 100 </span>
    {% else %}
    <a href="?per_page=100" class="per-page">100</a>
    {% endif %}
</div>

{% endblock %}

{% block extra_script %}
<script type="text/javascript">
var traffic_items = [
    'sync_file_upload',
    'sync_file_download',
    'web_file_upload',
    'web_file_download',
    'link_file_upload',
    'link_file_download'
];
$('.table-sort-op').each(function(index, item) {
    var traffic_item = traffic_items[index];
    var url = '?type={{type}}&month={{month}}&page={{current_page}}&per_page={{per_page}}';
    var $icon = $('.sort-icon', $(item));

    if ('{{order_by}}' == traffic_item + '_desc') {
        $icon.addClass('icon-caret-down')
            .removeClass('hide');
        url += '&order_by=' + traffic_item;
    } else if ('{{order_by}}' == traffic_item) {
        $icon.addClass('icon-caret-up')
            .removeClass('hide');
        url += '&order_by=' + traffic_item + '_desc';
    } else {
        url += '&order_by=' + traffic_item + '_desc';
    }
    $(item).attr('href', url);
});

$('#paginator a').each(function (index, link) {
    link.href += '&type={{type}}&month={{month}}&order_by={{order_by}}';
});
</script>
{% endblock %}
